<template>
	<view>
		<view class="whiteLine mtb20">
			<view class="flexR between p10">
				<span class="info">{{ info.deviceNo }}</span>
				<span class="c80">{{ getTime(info.date) }}</span>
			</view>
			<view class="flexR between p10">
				<view class="flexR list">
					<image class="imgs" mode="widthFix" src="@/static/imgs/icon1.png"></image>
					<view>
						<view class="name">温度</view>
						<view class="name2">{{ info.temperature }}℃</view>
					</view>
				</view>
				<view class="flexR list">
					<image class="imgs" mode="widthFix" src="@/static/imgs/icon2.png"></image>
					<view>
						<view class="name">湿度</view>
						<view class="name2">{{ info.humidity }}%</view>
					</view>
				</view>
				<!-- <view class="flexR list">
					<image class="imgs" mode="widthFix" src="@/static/imgs/icon3.png"></image>
					<view>
						<view class="name">空气颗粒度</view>
						<view class="name2">100mm</view>
					</view>
				</view> -->
			</view>
			<view class="box">
				<view>
					<image class="imgs2" mode="widthFix" src="@/static/imgs/icon3.png"></image>
					<span class="name">空气颗粒度0.3μm：</span><span class="flow"></span>
					<span class="name" :class="[info.particle3Red ? 'red' : 'green']">{{ info.particle3 }}个/L</span>
				</view>
				
			</view>
			<view class="box">
				<view>
					<image class="imgs2" mode="widthFix" src="@/static/imgs/icon3.png"></image>
					<span class="name">空气颗粒度0.5μm：</span><span class="flow"></span>
					<span class="name" :class="[info.particle5Red ? 'red' : 'green']">{{ info.particle5 }}个/L</span>
				</view>
				
			</view>
			<view class="box">
				<view>
					<image class="imgs2" mode="widthFix" src="@/static/imgs/icon3.png"></image>
					<span class="name">空气颗粒度1.0μm：</span><span class="flow"></span>
					<span class="name"
						:class="[info.particle10Red ? 'red' : 'green']">{{ info.particle10 }}个/L</span>
				</view>
				
			</view>
			<view class="box">
				<view>
					<image class="imgs2" mode="widthFix" src="@/static/imgs/icon3.png"></image>
					<span class="name">空气颗粒度2.5μm：</span><span class="flow"></span>
					<span class="name"
						:class="[info.particle25Red ? 'red' : 'green']">{{ info.particle25 }}个/L</span>
				</view>
				
			</view>
			<view class="box">
				<view>
					<image class="imgs2" mode="widthFix" src="@/static/imgs/icon3.png"></image>
					<span class="name">空气颗粒度5.0μm：</span><span class="flow"></span>
					<span class="name"
						:class="[info.particle50Red ? 'red' : 'green']">{{ info.particle50 }}个/L</span>
				</view>
				
			</view>
			<view class="box">
				<view>
					<image class="imgs2" mode="widthFix" src="@/static/imgs/icon3.png"></image>
					<span class="name">空气颗粒度10.0μm：</span><span class="flow"></span>
					<span class="name"
						:class="[info.particle100Red ? 'red' : 'green']">{{ info.particle100 }}个/L</span>
				</view>
			</view>
			<view style="height: 10px;"></view>
			<view class="line"></view>
			<view class="p10 flexR">
				<image style="width: 15px;" mode="widthFix" src="@/static/imgs/icon-localtion.png"></image>
				<span class="c80">{{info.address || '暂无'}}</span>
			</view>
		</view>
	</view>
</template>

<script>
import { parseTime } from '@/utils/index'

export default {
	props: ['info'],
	data() {
		return {
			title: 'page',
		};
	},
	onLoad() {

	},
	methods: {
		getTime(v) {
			if(!v) return '--'
			return parseTime(v)
		}

	}
}
</script>

<style lang="scss" scoped>
.info {
	font-weight: bold;
}
.box {
	display: inline-block;
	width: 96%;
	padding-left: 6px;
	>view {
		display: flex;
	}
}
.imgs {
	width: 22px;
	margin-right: 10px;
}
.imgs2 {
	width: 18px;
	margin-right: 1px;
}

.name {
	font-size: 12px;
}

.name2 {
	font-size: 16px;
	font-weight: bold;
}

.bg {
	width: 100%;
	position: absolute;
	top: 0;
	z-index: -1;
}

.list {
	width: 33%;
	align-items: flex-start;
}</style>
